{{- /*
  This template recursively renders the sidebar navigation, grouping pages by `Params.sidebar.groups`.
  Highlights:
  - Supports hierarchical navigation with collapsible sections (`renderList` template).
  - Dynamically applies current page highlighting and expanded states.
  - Handles external links via `Params.sidebar.goto` in `renderSingle`.
  - Requires `Params.sitemap` and `Params.sidebar` for filtering and behavior.
*/ -}}
<!-- section tree -->
<nav class="md:text-sm flex flex-col">
  <div
    class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
  <ul>
    {{ template "renderChildren" .FirstSection }}
  </ul>
</nav>

{{ define "renderChildren" }}
  {{- $pages := where .Pages "Params.sitemap" "ne" "false" }}
  {{- if .Params.sidebar.reverse }}
    {{ $pages = .Pages.Reverse }}
  {{- end }}
  {{- $ungrouped := where $pages "Params.sidebar.group" "==" nil }}
  {{- range $ungrouped }}
    {{- if .IsSection }}
      {{- template "renderList" . }}
    {{- else }}
      {{- template "renderSingle" . }}
    {{- end }}
  {{- end }}
  {{- range .Params.sidebar.groups }}
    <li class="px-2 py-2 pb-2 text-gray-light dark:text-gray-dark uppercase
      text-xs font-semibold">{{ . }}</li>
    {{- range where $pages "Params.sidebar.group" . }}
      {{- if .IsSection }}
        {{- template "renderList" . }}
      {{- else }}
        {{- template "renderSingle" . }}
      {{- end }}
    {{- end }}
  {{- end }}
{{ end }}

{{/* Recursive template for sidebar items */}}
{{ define "renderList" }}
  {{ $isCurrent := eq page . }}
  {{ $expanded := or $isCurrent (page.IsDescendant .) }}
  <li x-data="{ expanded: {{$expanded}} }">
    <div class="rounded px-4 w-full flex items-center justify-between{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
      <div class="w-full py-2 truncate">
        {{- if .Permalink }}
          {{/* If the link is not empty, use it */}}
          <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }}
              class="block select-none hover:text-blue-light hover:dark:text-blue-dark"
            href="{{ .Permalink }}">
            {{ template "renderTitle" . }}
          </a>
        {{- else }}
          {{/* Otherwise, just expand the section */}}
          <button @click="expanded = !expanded"
            class="w-full text-left select-none hover:text-blue-light hover:dark:text-blue-dark">
            {{ template "renderTitle" . }}
          </button>
        {{- end }}
      </div>
      <button @click="expanded = !expanded" class="hover:bg-gray-light-300 hover:dark:bg-gray-dark-300 rounded">
        <span :class="{ 'hidden' : expanded }" class="icon-svg {{ if $expanded }}hidden{{ end }}">
          {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
        </span>
        <span :class="{ 'hidden' : !expanded }" class="icon-svg {{ if not $expanded }}hidden{{ end }}">
          {{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}
        </span>
      </button>
    </div>
    <ul :class="{ 'hidden' : !expanded }" class="{{if not $expanded}}hidden {{end}}ml-3">
      {{ template "renderChildren" . }}
    </ul>
  </li>
{{ end }}

{{ define "renderSingle" }}
  {{- if .Params.sidebar.goto }}
    <li class="px-4 hover:text-blue-light hover:dark:text-blue-dark">
      <a class="py-2 w-full truncate block"
         href="{{ .Params.sidebar.goto }}"
         title="{{ .LinkTitle }}">
        {{ template "renderTitle" . }}
      </a>
    </li>
  {{- else }}
    {{ $isCurrent := eq page . }}
    <li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark
      {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
      <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }} class="py-2 w-full truncate block"
        href="{{ .Permalink }}" title="{{ .LinkTitle }}">
        {{ template "renderTitle" . }}
      </a>
    </li>
  {{- end }}
{{ end }}

{{ define "renderTitle" }}
  {{ .LinkTitle }}
  {{- with .Params.sidebar.badge }}
    <span>{{- partial "components/badge.html" (dict "color" .color "content" .text) }}</span>
  {{- end }}
{{ end }}
